<%--
  Created by IntelliJ IDEA.
  User: lichengming
  Date: 2017/7/11
  Time: 下午10:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/resources.jsp" %>
<html>
<head>
    <title>数据测试</title>
    <style type="text/css">
        .choose-banners {
            position: relative;
            padding: 25px 15px 15px;
            margin: 15px 0;
            background-color: #fafafa;
            box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
            border-color: #e5e5e5 #eee #eee;
            border-style: solid;
            border-width: 1px 0;
        }

        #filePicker {
            display: inline-block;
            line-height: 1.428571429;
            vertical-align: middle;
            margin: 0 12px 0 0;
        }

        .uploader-list {
            width: 100%;
            overflow: hidden;
        }

        #uploader-banners .thumbnail {
            width: 110px;
            height: 110px;
        }
        .file-item {
            float: left;
            position: relative;
            margin: 0 20px 20px 0;
            padding: 4px;
        }

        .begin_upload_btn {
            height: 40px;
            position: relative;
        }

        .file-item .info {
            position: absolute;
            left: 4px;
            bottom: 4px;
            right: 4px;
            height: 20px;
            line-height: 20px;
            text-indent: 5px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
            z-index: 10;
        }
        .file-item .error {
            position: absolute;
            top: 4px;
            left: 4px;
            right: 4px;
            background: red;
            color: white;
            text-align: center;
            height: 20px;
            font-size: 14px;
            line-height: 23px;
        }


        .file-item .success {
            position: absolute;
            top: 4px;
            left: 4px;
            right: 4px;
            height: 20px;
            line-height: 20px;
            text-indent: 5px;
            background: rgba(63, 117, 4, 0.88);
            color: white;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
            z-index: 10;
        }

        .image-remove {
            position: absolute;
            right: 6px;
            top: 6px;
            cursor: pointer;
            color: white;
            z-index: 10000;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/ems/plugins/webuploader/webuploader.css">
    <!--引入JS-->
    <script type="text/javascript" src="/ems/plugins/webuploader/webuploader.js"></script>
</head>
<body>
<%--<div class="panel panel-default">--%>
    <%--<div class="panel-heading" role="tab" id="headingOne">--%>
        <%--<h4 class="panel-title">--%>
            <%--<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">--%>
                <%--删除用户数据--%>
            <%--</a>--%>
        <%--</h4>--%>
    <%--</div>--%>
    <%--<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">--%>
        <%--<div class="panel-body">--%>
            <%--<div class="form-group">--%>
                <%--<label class="col-sm-2 control-label">手机号：</label>--%>
                <%--<div class="col-sm-6">--%>
                    <%--<input type="text" name="phone" id="phone" class="form-control" placeholder="请填写要删除的手机号">--%>
                    <%--<button style="margin-top: 10px" id="deleteUser" type="button" class="btn btn-primary">删除用户</button>--%>
                <%--</div>--%>
            <%--</div>--%>
        <%--</div>--%>
    <%--</div>--%>
<%--</div>--%>
<%--<script>--%>
    <%--$(function () {--%>
        <%--$("#deleteUser").on("click",function () {--%>
            <%--var phone = $("#phone").val();--%>
            <%--if (!phone) {--%>
                <%--$.errorAlert("手机号码不能为空");--%>
                <%--return;--%>
            <%--}--%>
            <%--$.emsAjax({--%>
                <%--data:$.trim($("#phone").val()),--%>
                <%--url:"/datatest/delete",--%>
                <%--type:"POST",--%>
                <%--success:function (resp) {--%>
                    <%--if (resp.status == "000") {--%>
                        <%--$.alert(resp.message);--%>
                    <%--}else {--%>
                        <%--$.errorAlert(resp.message);--%>
                    <%--}--%>
                <%--}--%>
            <%--})--%>
        <%--});--%>
    <%--});--%>
<%--</script>--%>

<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="upload_header">
        <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#upload_collapse" aria-expanded="true" aria-controls="upload_collapse">
               上传图片
            </a>
        </h4>
    </div>
    <div id="upload_collapse" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="upload_header">
        <div class="panel-body">
            <div class="ems_edit_content">
                <form class="form-horizontal ems_internal_form">
                    <div class="form-group">
                        <%--<label class="col-sm-3 control-label">广告图片：</label>--%>
                        <div class="col-sm-12">
                            <!--dom结构部分-->
                            <div id="uploader-banners" class="choose-banners">
                                <!--用来存放item-->
                                <div id="fileList" class="uploader-list">
                                </div>
                                <div id="filePicker" class="webuploader-container">选择图片</div>
                                <button id="upBtn" class="begin_upload_btn btn btn-default">开始上传</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    var banners = [];
    function removeBannres($target) {
        for (var i = 0;i<banners.length;i++) {
            var hurl = $target.prev().attr("hurl");
            if (hurl == banners[i]) {
                banners.splice(i,1);
                console.log(banners.join(","));
                break;
            }
        }
        $parent = $target.parent();
        $("#url_" + $parent.attr("id")).parent().remove();
        $parent.remove();
    }
    jQuery(function() {
        var $ = jQuery,
            $list = $('#fileList'),
            ratio = window.devicePixelRatio || 1,
            thumbnailWidth = 100 * ratio,
            thumbnailHeight = 100 * ratio,

            uploader;

        uploader = WebUploader.create({

            auto: false,
            swf: '/ems/plugins/webuploader/Uploader.swf',
            server: '/ems/upload/fupload',
            pick: '#filePicker',
            accept: {
                title: 'Images',
                extensions: 'jpg,jpeg,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            },
        });

        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                    '<span class="image-remove"><i class="glyphicon glyphicon-remove-circle"></i></span>' +
                    '</div>'
                ),
                $img = $li.find('img');

            $list.append( $li );

            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>无法生成缩略图</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );

            $(".image-remove").on("click",function () {
                removeBannres($(this))
            })
        });

        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress span');

            if ( !$percent.length ) {
                $percent = $('<p class="progress"><span></span></p>')
                    .appendTo( $li )
                    .find('span');
            }
            $percent.css( 'width', percentage * 100 + '%' );
        });

        uploader.on( 'uploadSuccess', function(file,resp) {
            $( '#'+file.id ).addClass('upload-state-done');
            banners.push(resp.url);
            var $li = $( '#'+file.id ),
                $succeed = $li.find('div.success');

            if ( !$succeed.length ) {
                $succeed = $('<div class="success">上传成功</div>').appendTo( $li );
            }

            //var html = '<div class="form-group"><div class="col-sm-12"> <input type="text" required id="url_'+file.id+'" value="" class="form-control" placeholder="" readonly> </div> </div>';

            var indexItem = file.id.split("_");
            var index = parseInt(indexItem[indexItem.length - 1]);
            index += 1;
            //var fsize = $("#fileList").children().length;
            var html = '<div class="form-group" id="url_'+file.id+'"><div class="col-sm-12"> <input type="text" value="" class="form-control banner_url" placeholder="" readonly> </div> </div>';

            var $nextDiv = $("#url_WU_FILE_" + index);
            if ($nextDiv.length > 0 ) {
                $nextDiv.before(html);
            }else {
                $(".ems_internal_form").append(html);
            }
            $("#url_" + file.id).find("input").val(resp.url)

        });

        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');

            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上传失败');
        });

        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').remove();
        });

        $("#upBtn").on( 'click', function(event) {
            if ($("#fileList").children().length == 0) {
                $.errorAlert("请选择图片上传");
                return;
            }
            uploader.upload();
            return false;
        });
    });
</script>
</body>
</html>
